<route lang="json5">
{
  style: {
    navigationBarTitleText: '礼堂详情',
  },
}
</route>

<template>
  <view class="auditorium-detail">
    <view class="swiper-wrap">
      <!-- <wd-swiper
        :list="swiperList"
        autoplay
        v-model:current="current"
        :indicator="{ type: 'dots-bar' }"
        @click="handleClick"
        @change="onChange"
      ></wd-swiper> -->
      <LtSwiper :swiper-list="swiperList"></LtSwiper>
    </view>
    <view class="detail-info">
      <view class="detail-info-title">{{ detail.name }}</view>
      <view
        v-if="detail.openNote"
        class="detail-info-item"
      >
        <wd-icon
          name="time"
          size="20px"
        ></wd-icon>
        <text class="item-label">礼堂开放时间</text>
        <text class="item-value">{{ detail.openNote }}</text>
      </view>
      <view
        v-if="detail.contactor && detail.phone"
        class="detail-info-item"
      >
        <wd-icon
          name="call"
          size="20px"
        ></wd-icon>
        <text class="item-label">{{ detail.contactor }}(礼堂管理员)</text>
        <text
          class="item-value"
          @click="callPhone(detail.phone)"
        >
          {{ detail.phone }}
        </text>
      </view>
      <view
        v-if="detail.publicizeAdmin && detail.publicizePhone"
        class="detail-info-item"
      >
        <wd-icon
          name="call"
          size="20px"
        ></wd-icon>
        <text class="item-label">{{ detail.publicizeAdmin }}(宣传干事)</text>
        <text
          class="item-value"
          @click="callPhone(detail.publicizePhone)"
        >
          {{ detail.publicizePhone }}
        </text>
      </view>
    </view>
    <view class="detail-desc">
      {{ detail.note }}
    </view>
    <view
      v-if="activityList.length"
      class="activity-wrap"
    >
      <view class="activity-title">
        <wd-icon
          name="history"
          size="22px"
        ></wd-icon>
        <text>历届活动</text>
      </view>
      <view class="activity-list">
        <view
          v-for="(item, index) in activityList"
          :key="index"
          class="activity-item"
          @click="
            uniNavigateTo(`/pages-sub/activity/detail/index?id=${item.id}`)
          "
        >
          <view class="common-image-corner">
            <image
              class="img"
              :src="formatUrlString(item.liveUrl)[0]"
              mode="aspectFill"
            />
          </view>
          <view class="activity-item-text">{{ item.name }}</view>
        </view>
      </view>
    </view>
    <button
      class="common-share-btn"
      open-type="share"
    >
      <!-- <wd-icon name="share" size="18px"></wd-icon> -->
      <image
        class="share-icon"
        src="@/static/icons/share.svg"
      ></image>
      分享好友
    </button>
  </view>
</template>

<script setup>
import LtSwiper from '@/components/LtSwiper.vue'
import ActivityApi from '@/service/activity'
import HallApi from '@/service/hall'
import { currRoute, formatUrlString, uniNavigateTo } from '@/utils/index'

const baseURL = import.meta.env.VITE_SERVER_BASEURL

const swiperList = ref([])

const activityList = ref([])
const getHistoryActivity = async (id) => {
  const params = {
    hallId: id,
    pageNo: 1,
    pageSize: 10,
  }
  const { code, result } = await ActivityApi.getActivityList(params)
  if (code === 200 && result) {
    activityList.value = result.records
  }
}

const detail = ref({
  name: '',
  contactor: '',
  phone: '',
  note: '',
  openNote: '',
})
const getDetail = async (id) => {
  const params = { id }
  const { code, result } = await HallApi.getHallDetail(params)
  if (code === 200 && result) {
    swiperList.value = formatUrlString(result.coverUrl, false)
    console.log('swiperList.value', swiperList.value)
    detail.value = result
  }
}

onLoad((options) => {
  if (options.id) {
    getHistoryActivity(options.id)
    getDetail(options.id)
  }
})

onShareAppMessage(() => {
  console.log('currRoute', currRoute())
  const { path, query } = currRoute()
  const sharePath = `${path}?id=${query.id}`
  return {
    title: detail.value.name,
    path: sharePath,
  }
})

const callPhone = (phone) => {
  uni.makePhoneCall({
    phoneNumber: phone,
    success: () => {
      console.log('拨打电话成功')
    },
    fail: () => {
      uni.showToast({
        title: '拨打电话失败',
        icon: 'none',
      })
    },
  })
}
</script>

<style lang="scss" scoped>
.auditorium-detail {
  position: relative;
  min-height: 100vh;
  padding-bottom: 160rpx;
}

.swiper-wrap {
  :deep() .wd-swiper {
    &__track {
      border-radius: 0;
    }
  }
}

.detail-info {
  position: relative;
  padding: $uni-spacing-col-lg $uni-spacing-row-lg;

  &-title {
    width: 80%;
    margin-bottom: $uni-spacing-col-lg;
    font-size: $uni-font-size-title;
    font-weight: 700;
  }

  &-item {
    display: flex;
    align-items: center;
    margin-bottom: $uni-spacing-col-base;
    font-weight: 600;

    :deep() .wd-icon {
      margin-right: $uni-spacing-row-sm;
    }

    .item-label {
      margin-right: $uni-spacing-row-lg;
    }

    .item-value {
      color: $uni-color-primary;
    }
  }

  &-map {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
  }
}

.detail-desc {
  padding: 0 $uni-spacing-row-lg;
  margin-bottom: $uni-spacing-col-lg;
  font-size: $uni-font-size-base;
  line-height: 1.5;
  color: $uni-text-color-grey;
  text-indent: 28px;
  letter-spacing: 0.75px;
}

.activity-wrap {
  padding: 0 $uni-spacing-row-lg;

  .activity-title {
    display: flex;
    align-items: center;
    margin-bottom: $uni-spacing-col-lg;
    font-weight: 600;

    :deep() .wd-icon {
      margin-right: $uni-spacing-row-sm;
    }
  }

  .activity-list {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .activity-item {
    flex: none;
    width: 200px;
    margin-right: $uni-spacing-row-lg;

    &-text {
      padding: $uni-spacing-col-base;
      text-align: center;
    }

    .img {
      height: 100px;
    }
  }
}
</style>
